<template>
 <div id="app">
  <div class="canvas-container">
   <div ref="canvasRef" class="canvas"></div>
  </div>
  <div class="canvas-operate">
   <button @click="clickBtn1">播放</button>
   <button @click="clickBtn2">暂停</button>
  </div>
 </div>
</template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import WaveSurfer from "@/components/wavesurfer/wavesurfer.ts";
import {getDataByUrl} from "@/utils/js/common.ts";
import MuteDetect from "@/utils/js/MuteDetect.ts";
const canvasRef = ref ();
let wavesurfer = ref ();
onMounted (async () => {
 const musicUrl = `${location.origin}/3.wav`;
 const res = await getDataByUrl (musicUrl, 'blob');
 const musicBlobSrc = URL.createObjectURL (res);
 const muteDetect = MuteDetect.Init ({
  detectIntensity: 100,
  muteThreshold: 1,
  startDelay: 0,
  endDelay: 0,
  muteDuration: 100
 });
 muteDetect.getMuteRange (musicBlobSrc).then (res => {
  console.log (res)
 }).catch (err => {
  console.log (err)
 })
 wavesurfer.value = WaveSurfer.create({
   container: canvasRef.value,
   waveColor: '#d9cfff',
   progressColor: '#4010ff',
   height: 40,
   barWidth: 2,
   backend: 'MediaElement',
   mediaControls: false,
   audioRate: 1,
   cursorWidth: 0,
   autoCenter: true,
 });
 wavesurfer.value.load(musicBlobSrc)
})
function clickBtn1 () {
 wavesurfer.value.play ();
}
function clickBtn2 () {
 wavesurfer.value.pause ();
}
</script>
<style lang="less" scoped>
#app {
 margin: 200px;
 width: 200px;
 height: 200px;

 .canvas-container {
  width: 200px;
  height: 40px;

  .canvas {
   width: 100%;
   height: 100%;
  }
 }
}
</style>
